<script setup>
    import {ref} from "vue"
    const value = ref("")

    // 按键监听处理函数
    const onKeydown = () => {
        console.log("键盘按下")
    }
    // 点击事件处理函数
    const onParent = () => {
        console.log("div元素监听到点击事件")
    }
    const onChild = () => {
        console.log("p元素监听到点击事件")
    }
    // 点击跳转事件处理
    const onLink = () => {
        console.log("已点击a标签")
    }

    const name = ref("")
    const password = ref("")
    const location = ref("")

</script>

<template>
<div>
    <!-- 1.按键修饰符 -->
    <input type="text" @keydown.enter="onKeydown">
    <br><br>
    <!-- 2.事件修饰符 -->
    <div class="container" @click="onParent()">
        div区域
        <p @click.stop="onChild()">p标签区域</p>
        <a href="https://www.baidu.com" @click.prevent.stop="onLink()">跳转百度</a>
    </div>
    <br><br>
    <!-- 双向绑定修饰符 -->
     <!-- .trim 去除首尾空格 -->
    <input type="text" v-model.trim="name">姓名：

     <!-- .number 尝试将文本转换为数字 -->
    <input type="text" v-model.number="password">密码：

     <!-- .lazy 当输入框失焦后再进行同步 -->
    <input type="text" v-model.lazy="location">地区：
</div>
</template>

<style scoped>
    .container {
        width: 250px;
        height: 200px;
        background-color: aquamarine;
    }
    .container p {
        display: block;
        width: 100px;
        height: 100px;
        background-color:blue;
        color: aliceblue;
    }
</style>
